<template>
  <div class="function">
    <!-- 产品分类选择器 -->
    <el-dropdown size="large">
      <el-button style="height:50px">
        <span>展示：</span>{{ selectedCategory ? selectedCategory : '所有客户' }}
        <el-icon class="el-icon--right"><arrow-down /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="selectedCategory = ''">所有客户</el-dropdown-item>
          <el-dropdown-item @click="selectedCategory = '张总'">张总</el-dropdown-item>
          <el-dropdown-item @click="selectedCategory = '杨总'">杨总</el-dropdown-item>
          <el-dropdown-item @click="selectedCategory = '万总'">万总</el-dropdown-item>

        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <div>
      <el-dropdown size="large" style="margin-right:50px">
        <el-button style="height:50px">
          <cp-icon name="order-文件夹" style="margin-right:10px"></cp-icon>
          导入
          <el-icon class="el-icon--right"><arrow-down /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>Action 1</el-dropdown-item>
            <el-dropdown-item>Action 2</el-dropdown-item>
            <el-dropdown-item>Action 3</el-dropdown-item>
            <el-dropdown-item>Action 4</el-dropdown-item>
            <el-dropdown-item>Action 5</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <!-- 添加产品按钮 -->
      <el-dropdown size="large" style="margin-right:30px">
        <el-button style="height:50px;background:#0caf60;color:#fff" @click="drawer = true">
          <cp-icon name="order-加号" style="margin-right:15px;"></cp-icon>
          添加产品
        </el-button>
      </el-dropdown>
    </div>
  </div>

  <!-- 搜索框和筛选 -->
  <div style="padding: 20px; display: flex; justify-content: space-between; align-items: center;">
    <el-input v-model="searchQuery" placeholder="请输入产品名称搜索" style="width: 1180px;height:50px" size="large" />
    <el-dropdown size="medium" style="margin-right:230px" id="sx">
      <el-button style="height:50px">
        <cp-icon name="order-筛选" style="margin-right:15px"></cp-icon>
        筛选
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="filterByOrderCount(50)">订单数大于 50</el-dropdown-item>
          <el-dropdown-item @click="filterByOrderCount(100)">订单数大于 100</el-dropdown-item>
          <el-dropdown-item @click="filterByTotalAmount(1000)">交易总额大于 1000</el-dropdown-item>
          <el-dropdown-item @click="filterByTotalAmount(2000)">交易总额大于 2000</el-dropdown-item>
          <el-dropdown-item @click="clearFilter">清除筛选</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>

  <!-- 产品表格 -->
  <el-table :data="paginatedData" style="width: 100%">
    <el-table-column type="selection" width="120" />
    <el-table-column label="客户头像" width="120">
      <template #default="scope">
        <el-image style="width: 50px; height: 50px;" :src="scope.row.image" fit="cover" alt="客户头像" />
      </template>
    </el-table-column>
    <el-table-column label="客户名称" width="220">
      <template #default="scope">
        <div style="display: flex">
          <div>
            <p style="margin: 5px 0">{{ scope.row.name1 }}</p>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="Email" width="280">
      <template #default="scope">
        <h4>￥{{ scope.row.price }}</h4>
      </template>
    </el-table-column>
    <el-table-column label="上次交易时间" width="280">
      <template #default="scope">
        <span>{{ scope.row.totalInventory }}</span>
      </template>
    </el-table-column>
    <el-table-column label="订单数（笔）" width="305">
      <template #default="scope">
        <span>{{ scope.row.sold }}</span>
      </template>
    </el-table-column>
    <el-table-column label="交易总额" width="220">
      <template #default="scope">
        <span>{{ scope.row.sold }}</span>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页组件 -->
  <div style="margin-left:20px" class="demo-pagination-block">
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper" :total="filteredData.length" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>

  <!-- Drawer 弹出框 -->
  <el-drawer size="50%" v-model="drawer" :with-header="false" custom-class="custom-drawer">
    <div class="top">
      <div class="left">
        <h2 class="drawer-title">客户信息</h2>
        <el-form :model="newProduct" ref="form" label-width="100px" class="product-form">
          <el-form-item label="客户名称">
            <el-input v-model="newProduct.name1" placeholder="请输入客户名称" class="input-field" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="newProduct.productCategory" placeholder="请输入客户名称" class="input-field" />
          </el-form-item>
          <el-form-item label="上次交易时间">
            <el-input v-model="newProduct.price" placeholder="请输入客户名称" class="input-field" />
          </el-form-item>
          <el-form-item label="订单数">
            <el-input v-model="newProduct.totalInventory" placeholder="请输入订单数" type="number" class="input-field" />
          </el-form-item>
          <el-form-item label="交易总额">
            <el-input v-model="newProduct.sold" placeholder="请输入已售数量" type="number" class="input-field" />
          </el-form-item>
          <el-form-item label="客户头像">
            <el-upload class="upload-demo" action="" :show-file-list="false" :on-change="handleImageChange"
              :before-upload="beforeImageUpload">
              <el-button slot="trigger" size="small" type="primary" class="upload-btn">上传图片</el-button>
              <el-button v-if="newProduct.image" @click="removeImage" size="small" type="danger"
                class="remove-btn">删除图片</el-button>
            </el-upload>
            <div v-if="newProduct.image" style="margin-top: 10px;" class="image-preview">
              <el-image style="width: 100px; height: 100px;" :src="newProduct.image" fit="cover" alt="客户头像" />
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="footer">
      <el-button @click="drawer = false" type="default" class="footer-btn cancel-btn">取消</el-button>
      <el-button @click="addProduct" type="primary" class="footer-btn submit-btn"></el-button>
    </div>
  </el-drawer>
</template>

<script setup>
import { ref, computed } from 'vue'

const drawer = ref(false)
const searchQuery = ref('') // 搜索框的查询值
const selectedCategory = ref('') // 选择的产品分类

// 假设你的所有数据在这里
const tableData = ref([
  { id: 1, name1: '张总', productCategory: '张总', price: '353952@qq.com', totalInventory: 180, sold: 50, flag: true, image: 'https://via.placeholder.com/100' },
  { id: 2, name1: '杨总', productCategory: '杨总', price: '353952@qq.com', totalInventory: 200, sold: 80, flag: true, image: 'https://via.placeholder.com/100' },
  { id: 3, name1: '万总', productCategory: '万总', price: '353952@qq.com', totalInventory: 150, sold: 60, flag: false, image: 'https://via.placeholder.com/100' },
  // 更多数据...
])

const currentPage = ref(1)
const pageSize = ref(5)

// 计算分页后的数据
const filteredData = computed(() => {
  // 先根据分类过滤
  let filtered = selectedCategory.value
    ? tableData.value.filter(item => item.productCategory === selectedCategory.value)
    : tableData.value

  // 再根据搜索框过滤
  if (searchQuery.value) {
    filtered = filtered.filter(item => item.name1.includes(searchQuery.value))
  }

  return filtered
})

// 根据分页获取数据
const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredData.value.slice(start, end)
})

// 分页变更
const handleSizeChange = (newSize) => {
  pageSize.value = newSize
}

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
}

// 筛选操作 - 根据订单数进行筛选
const filterByOrderCount = (count) => {
  tableData.value = tableData.value.filter(item => item.sold >= count)
}

// 筛选操作 - 根据交易总额进行筛选
const filterByTotalAmount = (amount) => {
  tableData.value = tableData.value.filter(item => item.sold * item.price >= amount)
}

const clearFilter = () => {
  // 清除筛选时恢复所有数据
  tableData.value = [
    { id: 1, name1: '张总', productCategory: '张总', price: 198, totalInventory: 180, sold: 50, flag: true, image: 'https://via.placeholder.com/100' },
    { id: 2, name1: '杨总', productCategory: '杨总', price: 150, totalInventory: 200, sold: 80, flag: true, image: 'https://via.placeholder.com/100' },
    { id: 3, name1: '万总', productCategory: '万总', price: 220, totalInventory: 150, sold: 60, flag: false, image: 'https://via.placeholder.com/100' },
    // 更多数据...
  ]
}

// 新产品的表单数据
const newProduct = ref({
  name1: '',
  productCategory: '',
  price: '',
  totalInventory: '',
  sold: '',
  flag: false,
  image: ''
})

const addProduct = () => {
  const newId = tableData.value.length + 1
  tableData.value.push({
    ...newProduct.value,
    id: newId,
  })
  drawer.value = false // 关闭弹出框
  newProduct.value = {
    name1: '',
    productCategory: '',
    price: '',
    totalInventory: '',
    sold: '',
    flag: false,
    image: ''
  }
}

const handleImageChange = (file, fileList) => {
  const reader = new FileReader()
  reader.onload = () => {
    newProduct.value.image = reader.result
  }
  reader.readAsDataURL(file.raw)
}

const removeImage = () => {
  newProduct.value.image = ''
}
</script>










<style lang="scss" scoped>
.el-table {
  width: 100%;

  .el-table-column {
    margin: 0 50px !important;
  }
}

.el-select__wrapper {
  height: 100%;
}

// span {
//   background: #e7f7ef;
//   padding: 5px 10px;
//   color: #16b266;
//   border-radius: 10px;
//   font-size: 12px;
//   display: inline-block;
// }
.span {
  background: #f4f0ff;
  color: #baa1ff;
}

.span1 {
  background: #fff0e6;
  color: #fea565;
}

.span2 {
  background: #fff0f0;
  color: #fd7777;
}

.demo-pagination-block+.demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

.demo-pagination-block {
  margin-top: 50px;
}

.function {
  display: flex;
  justify-content: space-between;
  width: 1340px;
  padding: 30px;

  .el-dropdown {
    height: 50px;
  }
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}



.custom-drawer {
  padding: 20px;
  border-radius: 10px;
  background-color: #f5f5f5;
}

.drawer-title {
  font-size: 22px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.product-form .el-form-item {
  margin-bottom: 20px;
}

.input-field,
.select-field {
  width: 100%;
  margin-top: 5px;
}

.upload-demo .el-button {
  margin-right: 10px;
}

.upload-btn {
  background-color: #409EFF;
  color: #fff;
  transition: background-color 0.3s ease;
}

.upload-btn:hover {
  background-color: #3382d1;
}

.remove-btn {
  background-color: #f56c6c;
  color: #fff;
  transition: background-color 0.3s ease;
}

.remove-btn:hover {
  background-color: #f13d3d;
}

.image-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.footer {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background-color: #fff;
  border-top: 1px solid #f0f0f0;
}

.footer-btn {
  width: 48%;
  font-size: 14px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.cancel-btn {
  background-color: #e4e7ed;
  border-color: #d3dbe1;
}

.submit-btn {
  background-color: #409EFF;
  color: #fff;
}

.footer-btn:hover {
  opacity: 0.9;
}
</style>
